<template>
  <div id="app-container">
    <!--条件查询表单-->
    <el-form :inline="true" class="demo-form-inline">
       <el-form-item>
          <el-select v-model="doctorQueryVo.organizationId" clearable placeholder="所属机构" @change="changeOrganization"  >
              <el-option v-for="organization in organizationList"
                         :key="organization.id"
                         :label="organization.name"
                         :value="organization.id"  />
              <el-option :value="2" label="首席讲师"/>
          </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="doctorQueryVo.teamId" clearable placeholder="所属团队"  @change="changeTeam">
          <el-option v-for="team in teamList"
                     :key="team.id"
                     :label="team.name"
                     :value="team.id"/>
          <el-option :value="2" label="首席讲师"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="doctorQueryVo.labelId" clearable placeholder="医生标签"  @change="changeLabel">
          <el-option v-for="label in labelList"
                     :key="label.id"
                     :label="label.name"
                     :value="label.id"/>
          <el-option :value="2" label="首席讲师"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="doctorQueryVo.name" placeholder="医生名字"/>
      </el-form-item>


      <el-button type="primary" icon="el-icon-search" @click="getList(-1)">查询</el-button>
      <el-button type="default">清空</el-button>
      <router-link  to="/doctor/add">
        <el-button type="primary">新增</el-button>
      </router-link>
      <el-button type="default" @click="downlaod()">导出</el-button>


    </el-form>

    <!--数据显示列表-->
    <el-table :data="datalist" fit highlight-current-row>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="编号" width="70"></el-table-column>
      <el-table-column  label="头像" width="80" >
        <template slot-scope="scope">
          <img :src="scope.row.image" width="50px">
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="80" ></el-table-column>
      <el-table-column prop="phone" label="联系电话"  width="180"></el-table-column>
      <el-table-column prop="role" label="角色" width="80"></el-table-column>
      <el-table-column prop="team" label="所属团队" width="100" ></el-table-column>
      <el-table-column prop="organization" label="所属机构" width="100" ></el-table-column>
      <el-table-column label="操作" width="400">
        <template slot-scope="scope">
          <router-link :to="'/doctorDetail/'+scope.row.id">
            <el-button  type="text" size="mini" icon="el-icon-query" >查看详情</el-button>
          </router-link>

          <router-link  :to="'/doctor/edit/'+scope.row.id">
            <el-button  type="text" size="mini" icon="el-icon-edit" >修改</el-button>
          </router-link>
          <el-button  type="text" size="mini" icon="el-icon-delete" @click="handleRemove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import axios from 'axios'
import doctor from '../../../api/admin/doctor'
import team from '../../../api/admin/team'
import organization from '../../../api/admin/organization'
import label from '../../../api/admin/label'
import { getList } from '../../../api/table'
export default {
  data(){
    return{
      doctorQueryVo:{},         //查询条件
      currentPage:1,
      pageSize:2,
      datalist: [],
      total:0,
      organizationList:[],        //机构的列表
      teamList:[],                //团队列表
      labelList:[],                //标签列表
    }
  },
  created() {
    this.getList();
    this.getOrganizationList();
    this.getTeamList();
    this.getLabelList();
  },
  methods:{
    //分页查所有
    getList(flag){
      if (flag==-1){
        this.currentPage=1;
      }
      doctor.getList(this.currentPage, this.pageSize, this.doctorQueryVo).then(res=>{
        console.log(res)
        this.datalist=res.data.data;
        this.total=res.data.total;
      })
    },
    //改变每页记录数
    handleSizeChange(pageSize){
      this.pageSize=pageSize;
      this.getList();
    },
    //改变当前页
    handleCurrentChange(currentPage){
      console.log(currentPage)
      this.currentPage=currentPage;
      this.getList();
    },
    //删除
    handleRemove(row){
      this.$confirm("是否确定删除？", "提示", {type: "warning"})
        .then(() => {
          // 点击了确定删除
          doctor.removeById(row.id).then(res => {
            // 显示提示信息
            this.$message.success(res.message);
            // 重新查询分页数据
            this.getList();
            // this.currentPage=row.currentPage-1;
          });
        })
        .catch(() => {
          // 点击取消删除
          this.$message.info("取消删除操作");
        });
    },
    //导出
    downlaod(){
      let list=[];
      trainer.search().then(res=>{
        list=res.data;
      })
      trainer.download(list).then(res=>{
        this.$message.success("操作成功")
      })
    },
    /*// 导出数据
    handleExport(){
      console.log("===导出数据===");
      axios({
        method: 'post',
        url: "http://localhost:8080/doctor/export",
        responseType: 'blob', // 返回类型为数据流
        data: this.trainerQueryVo // 需要传参的话，在这传
      }).then(res => {
        if (res && res.data) {
          // 调用js-file-download下载文件，第一个参数是数据流，第二个参数是文件名
          fileDownload(res.data, "培训师.xlsx")
        }
      })
    },*/
    //查询所有机构
    getOrganizationList(){
      organization.getAll().then(res=>{
        this.organizationList=res.data;
      })
    },
    //查询所有团队
    getTeamList(){
      team.getAll().then(res=>{
        this.teamList=res.data;
      })
    },
    //查询所有标签
    getLabelList(){
      label.getAll().then(res=>{
        this.labelList=res.data;
      })
    },
    //选则组织时
    changeOrganization(id){
     this.doctorQueryVo.organizationId=id;
     //触发分页条件
     this.getList(-1);
    },
    //选则团队时
    changeTeam(id){
      this.doctorQueryVo.teamId=id;
      this.getList(-1);
    },
    //选则组织时
    changeLabel(id){
      this.doctorQueryVo.LabelId=id;
      this.getList(-1);
    },


  }
}
</script>

<style scoped>

</style>
